import React, { Component } from 'react'
import './index.css';
// import Hero from '../../pages/Hero';
// import HeroDetail from '../../pages/HeroDetail';
import {Route, withRouter} from 'react-router-dom';
import Movie from '../Movie';
import Goods from '../Goods';
import YiYan from '../YiYan';
import DouYin from '../DouYin'
class App extends Component {
    render(){
        return <div>
            <h2>项目列表</h2>         
            <hr />
            <button onClick={this.back}>后退</button>
            <button onClick={this.showGoods}>商品</button>
            <button onClick={this.showMovie}>电影</button>
            <button onClick={this.showYiYan}>一言</button>
            <button onClick={this.showDouYin}>抖音</button>
            <button onClick={this.forward}>前进</button>
            <hr />

            <Route path="/goods" component={Goods} />
            <Route path="/movie" component={Movie} />
            <Route path="/yiyan" component={YiYan} />
            <Route path="/douyin" component={DouYin}/>

        </div>
    }

    back = () => {
        // this.props.history.goBack();
        this.props.history.go(-1);
    }

    forward = () => {
        // this.props.history.goForward();
        this.props.history.go(1);
    }
    
    showGoods = () => {
        // console.log('显示电影啦!!');
        // 在路由组件中, this.props 属性的 history 对象可以进行路由跳转
        this.props.history.push('/goods');
    }

    showMovie = () => {
        // console.log('显示电影啦!!');
        // 在路由组件中, this.props 属性的 history 对象可以进行路由跳转
        this.props.history.push('/movie');
    }

    showYiYan = () => {
        // console.log('显示电影啦!!');
        // 在路由组件中, this.props 属性的 history 对象可以进行路由跳转
        // this.props.history.push('/yiyan');
        this.props.history.replace('/yiyan');
    }
    showDouYin =()=>{
        this.props.history.push('/douyin');
    }
}

export default withRouter(App);

